<template>
	<div id="Class">
		<ul class="list-group">
		    <li class="list-group-item">班级名称 
		    	<input class="mustInput" type="text" placeholder="请填写班级名称" v-model="classes.name" />
		    </li>
		    <li class="list-group-item sex custom-checkbox">
	    		班级属性&nbsp;<input type="radio" name="sex" value="1" v-model="classes.class_type" />
	    			<label> 实验班</label>
	    			<input type="radio" name="sex" value="2" v-model="classes.class_type" />
	    			<label> 普通班</label>
	    	</li>
		    <li class="list-group-item">班级人数
				<input class="mustInput" type="text" style="width: 64%;" placeholder="请填写班级人数" v-model="classes.total_number" />
		    </li>
			<router-link :to="{ name: 'addPerson' ,params: {role: 6 ,'gradeId':this.$route.params.gradeId,'classId':classNumber} }">
				<li class="list-group-item" style="padding: 0;border-bottom: none;">
			    	<li class="list-group-item xiaozhang listTitle">
	            		<img src="../assets/jiahao.png"/> 班主任
	            	</li>
	                <ul class="list-group two">
						<div v-for="(personne,key) in personnelArray" :key="key">
							<router-link :to="{ name: 'edit' , params: { index: key }}">
								<template v-if="personne.role == 6 && personne.class_id == classNumber">
									<li class="list-group-item" >{{ personne.name }}
			                            <span class="pull-right required">
			                                <img  src="../assets/write.png"/>
			                            </span>
									</li>
								</template>
							</router-link>
						</div>
	                </ul>
	            </li>
			</router-link>
            <router-link :to="{ name: 'addPerson' ,params: {role: 7,'gradeId':this.$route.params.gradeId,'classId':classNumber} }">
            	<li class="list-group-item" style="padding: 0;border-bottom: none;">
				    <li class="list-group-item xiaozhang listTitle">
		            	<img src="../assets/jiahao.png"/> 任课教师
		            </li>
	                <ul class="list-group two">
						<div v-for="(personne,key) in personnelArray" :key="key">
							<router-link :to="{ name: 'edit' , params: {index: key }}">
								<template v-if="personne.role == 7 && personne.class_id == classNumber">
									<li class="list-group-item" >{{ personne.name }}
			                            <span class="pull-right required">
			                                <img  src="../assets/write.png"/>
			                            </span>
									</li>
								</template>
							</router-link>
						</div>
	                </ul>
	            </li>
			</router-link>
			<div class="block">
	            <router-link :to="{ name: 'addPerson' ,params: {role: 8,'gradeId':this.$route.params.gradeId,'classId':classNumber} }">
	            	<li class="list-group-item" style="padding: 0;border-bottom: none;">
					    <li class="list-group-item xiaozhang listTitle">
			            	<img src="../assets/jiahao.png"/> 班长
			            </li>
		                <ul class="list-group two">
							<div v-for="(personne,key) in personnelArray" :key="key">
								<router-link :to="{ name: 'edit' , params: {index: key }}">
									<template v-if="personne.role == 8">
										<li class="list-group-item" >{{ personne.name }}
				                            <span class="pull-right required">
				                                <img  src="../assets/write.png"/>
				                            </span>
										</li>
									</template>
								</router-link>
							</div>
		                </ul>
		            </li>
				</router-link>
			</div>
		</ul>
		<!--按钮-->
		<div v-if="this.$route.params.index >= 0">
            <button type="button" @click="del()" class="btn btn-primary btn-lg btn-block del">删除</button>
			<button type="button" @click="add(classes,1)" class="btn btn-primary btn-lg btn-block little">保存</button>
        </div>
		<div v-else>
        	<button type="button" @click="add(classes,2)" class="btn btn-primary btn-lg btn-block little">保存并继续添加</button>
			<button type="button" @click="add(classes,1)" class="btn btn-primary btn-lg btn-block little">保存</button>
		</div>
		<!--按钮end-->
	</div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'Class',
  computed: {
      personnelArray () {
          return this.$store.state.system.personnelArray
      },
      classArray () {
          return this.$store.state.system.classArray
      },
      grade () {
          return this.$store.state.system.grade
      },
      classes () {
          return this.$store.state.system.classes
      },
      classNumber () {
          return this.$store.state.system.classNumber
      },
      classes_content () {
          return this.$store.state.system.classes_content
      },
  },
  created () {
      this.init()  //初始化
  },
  watch: {
      '$route': 'init'
  },
  methods:{
  	init() {
        //判断是否是添加
        if(this.$route.params.index >= 0) {
            this.$store.state.system.classes = this.$store.state.system.classArray[this.$route.params.index];
            this.$store.state.system.title =  this.$store.state.system.classes_content.editTitle
        }else{
            // this.empty()//添加成功数据清空
            this.$store.state.system.title =  this.$store.state.system.classes_content.title
//          console.log(this.$store.state.system.title)
        }
    },
  	add(param,status) {
  		let row = this.checkData(param)
		if(row.status == 1)
		{
            layer.open(row.msg);
		    return false;
		}
        param.grade_id = this.$route.params.gradeId
        param.class_id = this.$store.state.system.classNumber
        this.$store.state.system.classArray.push(param)
        layer.open(row.msg);
        this.empty()//添加成功数据清空
        if(status == 1) {
            this.$router.go(-1)
        }
        this.$store.state.system.classNumber++
  	},
  	empty() {  //清空数据
        this.$store.state.system.classes = {
            school_id: null,//学校ID
            grade_id: null,//年级ID
            class_id: null,//班级ID
            name:'',//班级名称
            class_type:1,//班级类型
            total_number:'',//班级人数
        }
	},
    checkData(param) {
        if(param.name == ""){
            return { status: 1, msg: {content: '请添写班级名称！', skin: 'msg', time: 2 }}
        }
        if(param.total_number == ''){
            return { status: 1, msg: {content: '请添写班级人数！', skin: 'msg', time: 2 }}
        }
        return { status: 0, msg: { content: '添加成功！', skin: 'msg', time: 2 }};
	}
  }
}
</script>

<style>
	button.little{
		width: 40%;
		float: left;
		margin-left: 0.5rem;
		padding: 0.15rem;
		background-color: #4a77b0;
		border: none!important;
	    outline: none!important;
	    font-size: 0.3rem;
	}
	button.btn-block{
		margin-top: 0.5rem;
	}
	.btn-block + .btn-block{
		margin-top: 0.5rem;
	}
	.btn:focus{
		background-color: #4a77b0;
		outline: none;
	}
	button.del{
		width: 40%;
		background-color: #f25151;
		border: 1px solid #f25151;
		float: left;
		height: 0.7rem;
		padding: 0;
		margin-left: 0.5rem;
	}
	.del:active{
		background-color: #f25151!important;
		border: 1px solid #f25151!important;
	}
	.right img{
 		width: 0.14rem;
 		height: 0.24rem;
 	}
	.mustInput{
		text-indent: 1em;
	}
	.custom-checkbox input[type="radio"] {
        -webkit-appearance: none;
        height: 0.32rem;
        vertical-align: sub;
        width: 0.32rem;
        outline: none;
    }
    .custom-checkbox input[type="radio"]:checked {
        background: url(../assets/gou.png) no-repeat;
        background-size:100% 100%;
    }
    .custom-checkbox input[type="radio"]:not(:checked) {
        background: url(../assets/nogou.png) no-repeat;
        background-size:100% 100%;
    }
    .custom-checkbox input{
        margin-left: 0.3rem;
        border: none;
    }
</style>